<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
				
			<view class="content">
				<view v-if="current === 0&&cardAll.length!==0" v-for="item in cardAll"  >
						<view class="card" @click="cardDetail(item)">
							
						
							<image :src="item.image"></image>
							<text class="card-name">{{item.cardName}}</text>
							<text class="card-type">{{item.type}}</text>
							<text class="card-price">¥{{item.price}}</text>
						</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>
<script>
	import {baseUrl} from '@/config.js'
	import { getCardList } from '@/api/card.js'
import { getSelectedCardByUserId } from '../../api/user'
	export default {
		data() {
			return {
				current:0,
				styleType:"text",
				items:["可使用",
				// "已过期"
				],
				cardAll:[],
				stored:[],
				

			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			change(res){
				for (var i = 0; i < res.data.data.length; i++) {
					if(res.data.data[i].type=="期限卡"){
						res.data.data[i].type="期"
					}else if(res.data.data[i].type=="储值卡"){
						res.data.data[i].type="储"
					}else if(res.data.data[i].type=="次卡"){
						res.data.data[i].type="次"
					}
				}
			},
			cardDetail(item){
				console.log(item);
				uni.navigateTo({
					url:"/pages/detail/cardDetail?id="+item.id+"&status=false"
				}).then(res=>{
					console.log(res);
				})
			} 
		},
		onLoad() {
			
			var id=uni.getStorageSync('auth')
			getSelectedCardByUserId(id).then(res=>{
				console.log(res);
				for (var i = 0; i < res.data.data.length; i++) {
					res.data.data[i].image=baseUrl+"/common/download?name="+res.data.data[i].image
				}
				console.log(res);
				this.cardAll=res.data.data
				this.change(res)
			})
		},
		
	}
</script>

<style>
.card{
	width: 80%;
	background-size: 100%;
	margin: auto;
	margin-top: 2vh;
	position: relative;
	height: 25vh
}
.card image{
	height: 23vh;
	width: 100%;
	border-radius: 2vh;
	z-index: 1;
	position: absolute;
	
}
.card text{
	position: absolute;
	z-index: 2;
}
.card-name{
	font-size: 2.5vh;
	font-weight: bold;
	color: seagreen;
	position: absolute;
	top: 3.5vh;
	left: 2.5vh;
	font-family: "";
}
.card-type{
	font-size: 3vh;
	position: absolute;
	right: 2vh;
	top: 2.5vh;
	color: #FCF7F3;
}
.card-price{
	font-size: 2vh;
	color: ghostwhite;
	position: absolute;
	top: 17vh;
	font-weight: bold;
	left: 3vh;
}
</style>